<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';
import { useFetch } from '@/home/hooks/fetch';
import { useAsyncData } from '@/home/hooks/async-data';
import { useAppStore } from '@/home/stores/app';
import { useCommunity } from '@/home/hooks/community';

const { $fetch } = useFetch();
const { name } = useCommunity();
const appStore = useAppStore();
const communityInfo = appStore.config;
const userInfo = appStore.user;

const { data: isMember, refresh } = useAsyncData(
  'home:isMember',
  () => userInfo.id && $fetch('/user/isMembers'),
);

const joinCommunity = async (refreshPage: boolean = false) => {
  const { isSuccess } = await $fetch('/user/joinCommunity', {
    autoGotoLogin: true,
  });

  if (isSuccess) {
    console.log('success');
  } else {
    console.log('fail');
  }

  if (refreshPage) {
    window.location.reload();
  }
  else {
    refresh();
  }
};
</script>

<template>
  <section class="relative h-458 rounded-10 bg-hex-fafafa p-40 pb-24">
    <img src="https://res.oafimg.cn/-/bb99fdc124a9f1a4/bg.png">

    <div class="translate-y--38">
      <img :src="communityInfo.headLogo" class="mx-auto size-84 border-6 border-hex-fafafa rounded-14 border-solid object-cover" :alt="communityInfo.name" v-if="communityInfo.headLogo">

      <div class="mt-16 text-center text-16 text-hex-1f1f1f font-500 leading-22">{{ name }}</div>
      <p class="line-clamp-2 mt-8 text-14 text-hex-575757 font-400 leading-22" :title="communityInfo.description">{{ communityInfo.description }}</p>

      <ul class="mt-16 flex justify-between">
        <li class="w-50 text-center">
          <div class="text-16 text-hex-1f1f1f font-500 leading-22">{{ formatNumber(communityInfo.userNumber) }}</div>
          <div class="mt-8 text-12 color-hex-8b8b8b font-400 leading-18">{{ $t('home.home.communityData.people.title') }}</div>
        </li>
        <li class="w-50 text-center">
          <div class="text-16 text-hex-1f1f1f font-500 leading-22">{{ formatNumber(communityInfo.communityWarehouseNumber) }}</div>
          <div class="mt-8 text-12 color-hex-8b8b8b font-400 leading-18">{{ $t('home.home.communityData.repository.title') }}</div>
        </li>
        <li class="w-50 text-center">
          <div class="text-16 text-hex-1f1f1f font-500 leading-22">{{ formatNumber(communityInfo.communityOrgNumber) }}</div>
          <div class="mt-8 text-12 color-hex-8b8b8b font-400 leading-18">{{ $t('home.home.communityData.organization.title') }}</div>
        </li>
      </ul>

      <button @click="joinCommunity(false)" class="mt-16 h-40 w-full border-1 border-hex-292929 rounded-10 border-solid bg-transparent text-14 text-hex-292929 font-400 leading-16" :disabled="isMember">{{ isMember ? $t('home.home.communityCard.joined') : $t('home.home.communityCard.join') }}</button>

      <ul class="mt-16 flex-y-center justify-center gap-24">
        <template v-for="item in communityInfo.medium" :key="item.operatorId">
          <li :title="item.mediumName" v-if="item.mediumPic">
            <a class="block h-20 w-20" :href="item.mediumJumpAddress" target="_blank">
              <img :src="item.mediumPic" class="h-full w-full object-cover" :alt="item.mediumName">
            </a>
          </li>
        </template>
        <li v-if="communityInfo.qrcode" class="group relative">
          <div class="i-icons:wechat size-20 text-hex-28c445"></div>
          <div class="absolute left-50% top-130% hidden size-120 translate-x--50% rounded-4 bg-white p-4 shadow-[0_4px_6px_0_rgba(0,0,0,0.05)] group-hover:(block)">
            <img :src="communityInfo.qrcode" class="block size-full rounded-2 object-cover" alt="wechat">
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<style lang="scss" scoped>
</style>
